<template>
	<div class="normal-speak-input-wrapper">
		<!-- 普通 input -->
		<template v-if="!textArea">
			<el-form-item :label="label" :required="required" :prop="required ? prop : ''" :rules="rules">
				<!-- <el-input :value="value" :disabled="showDetail" :placeholder="placeholder" :minlength="minlength" :maxlength="maxlength" @input="input" @change="onChange(prop)" :id="prop"> </el-input> -->
				<ZcoInput :value="value" :disabled="showDetail" :placeholder="placeholder" :minlength="minlength" :maxlength="maxlength" @input="input" @change="onChange(prop)" :id="prop" > </ZcoInput>
				<span class="add-icon" v-if="!showDetail && variableIcon"><el-button icon="el-icon-plus" type="text" @click.prevent="onAddVariable"></el-button></span>
			</el-form-item>
		</template>
		<!-- 文本域 input -->
		<template v-else>
			<el-form-item :label="label" :required="required" :prop="required ? prop : ''" :rules="rules">
				<!-- <el-input
					:value="value"
					:placeholder="placeholder"
					:disabled="showDetail"
					:minlength="minlength"
					:maxlength="maxlength"
					type="textarea"
					:autosize="{ minRows: 1.1, maxRows: 3 }"
					@input="input"
					@change="onChange(prop)"
					:id="prop"
				></el-input> -->
				<ZcoTextarea
					:value="value"
					:placeholder="placeholder"
					:disabled="showDetail"
					:minlength="minlength"
					:maxlength="maxlength"
					type="textarea"
					:autosize="{ minRows: 1.1, maxRows: 3 }"
					@input="input"
					@change="onChange(prop)"
					:id="prop"
				></ZcoTextarea>
				<span class="add-icon" v-if="!showDetail && variableIcon"><el-button icon="el-icon-plus" type="text" @click.prevent="onAddVariable"></el-button></span>
			</el-form-item>
		</template>
	</div>
</template>

<script>
import ZcoInput from '../components/TinymceInput.vue';
import ZcoTextarea from '../components/TinymceTextarea.vue';
export default {
	components: {
		ZcoInput,
		ZcoTextarea,
	},
	props: {
		label: {
			type: String,
			default: () => 'AI说'
		},
		placeholder: {
			type: String,
			default: () => '请编辑AI客服播报的话术'
		},
		minlength: {
			type: Number,
			default: () => 1
		},
		maxlength: {
			type: Number,
			default: () => 140
		},
		value: {
			type: String,
			required: true,
			default: () => ''
		},
		video: {
			type: [Object || null],
			default: () => {}
		},
		variableIcon: {
			type: Boolean,
			default: () => true
		},
		required: {
			type: Boolean,
			default: () => false
		},
		prop: {
			type: String,
			default: () => ''
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},

		textArea: {
			type: Boolean,
			default: () => false
		},
		rules: {
			type: Object,
			default: () => {}
		},
	},
	methods: {
		onAddVariable() {
			this.$emit('onAddVariable', this.prop);
		},

		input(e) {
			this.$emit('input', this.prop, e);
		},
		onChange() {}
	}
};
</script>

<style></style>
